<template>
  <div class="studyContainer">
    <div class="box2">
      <div class="title">获奖详情</div>
      <div class="xuekjhd-container">
        <div class="xuekjhd-itembox-left">
          <div ref="pieChartRef" class="chart-container"></div>
        </div>
        <div class="xuekjhd-itembox-right" style="overflow-y: scroll;">
          <div class="info flex justify-between">
            <div>
              <div class="info-dot"></div>
              全国优秀教师
            </div>
            <div style="color: #00ffff">一等奖</div>
          </div>
          <div class="info flex justify-between">
            <div>
              <div class="info-dot"></div>
              国家教学能手大赛
            </div>
            <div style="color: #00ffff">二等奖</div>
          </div>
        </div>
      </div>
    </div>
    <div class="box1">
      <div class="title">学生指导与培养</div>
      <div class="chengJJL-container">
        <div class="chengJJL-item">
          <div style="color: #80d3ff; margin-top: 10px" v-px-to-vw>学科竞赛指导：</div>
          <el-timeline
            style="
              height: calc(100% - 40px);
              padding: 20px;
              box-sizing: border-box;
              overflow-y: scroll;
              margin-right: 10px;
            "
          >
            <el-timeline-item
              v-for="(item, index) in timelineData"
              :key="index"
              :timestamp="item.text"
              color="#00F0FF"
            >
              <span style="color: #00ffff">{{ item.name }}</span>
            </el-timeline-item>
          </el-timeline>
        </div>
        <div class="chengJJL-item">
          <div style="color: #80d3ff; margin-top: 10px" v-px-to-vw>个性化辅导案列：</div>
          <div style="height: calc(100% - 60px); padding: 15px 10px; overflow-y: scroll;" v-px-to-vw>
            <div v-for="(item, index) in alData" :key="index" class="al-item">
              <div style="color: #00ffff">{{ item.name }}</div>
              <div style="color: #00ffff">{{ item.text }}</div>
              <div style="margin-top: 16px" v-px-to-vw>{{ item.content }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box2">
      <div class="title">其他教学成果</div>
      <div class="xuekjhd-container" style="width: 100%; overflow-x: scroll">
        <div class="flex" style="margin: 10px 0; flex-wrap: nowrap" v-px-to-vw>
          <div
            v-for="(item, index) in resultData"
            :key="index"
            class="result-item"
          >
            <div style="color: #00ffff; font-size: 13px" v-px-to-vw>{{ item.name }}</div>
            <div class="result-text">{{ item.text }}</div>
            <div class="result-type">{{ item.type }}</div>
            <div class="result-date">{{ item.date }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import * as echarts from "echarts";

const timelineData = ref([
  { name: "全国高中数学竞赛", text: "获奖情况：省级一等奖2人，二等奖5人" },
  { name: "全国高中数学竞赛", text: "获奖情况：省级一等奖2人，二等奖5人" },
  { name: "全国高中数学竞赛", text: "获奖情况：省级一等奖2人，二等奖5人" },
]);

const alData = ref([
  {
    name: "张同学",
    text: "2023届毕业生 录取清华大学 高考数学148分",
    content: "1对1辅导，1对多辅导",
  },
  {
    name: "张同学",
    text: "2023届毕业生 录取清华大学 高考数学148分",
    content: "1对1辅导，1对多辅导",
  },
]);
const resultData = ref([
  {
    name: "反转课堂2.0模式",
    text: "在传统翻转课堂基础上，引入AI学习助手和自适应学习路径，实现个性化学习体验。",
    date: "2023年",
    type: "研究论文",
  },
  {
    name: "反转课堂2.0模式",
    text: "在传统翻转课堂基础上，引入AI学习助手和自适应学习路径，实现个性化学习体验。",
    date: "2023年",
    type: "研究论文",
  },
  {
    name: "反转课堂2.0模式",
    text: "在传统翻转课堂基础上，引入AI学习助手和自适应学习路径，实现个性化学习体验。",
    date: "2023年",
    type: "研究论文",
  },
]);
let pieChartRef = ref(null);
let pieChart = ref(null);
function initChart() {
  pieChart = echarts.init(pieChartRef.value);
  pieChart.setOption({
    color: ["#00ffb2", "#fff509", "#00c1ff", "#00fff1"],
    legend: {
      show: false,
    },
    series: [
      {
        name: "获奖详情",
        type: "pie",
        radius: ["50%", "70%"],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        label: {
          formatter: ["{a|{b}}", "{b|{c}}"].join("\n"),
          rich: {
            a: {
              color: "#fff",
              fontSize: 12,
            },
            b: {
              color: "#fff",
              fontSize: 12,
            },
          },
        },
        data: [
          { value: 2, name: "校级" },
          { value: 2, name: "市级" },
          { value: 3, name: "省级" },
          { value: 1, name: "国家级" },
        ],
      },
    ],
  });
}

onMounted(() => {
  nextTick(() => {
      initChart();
      window.addEventListener("resize", function () {
        pieChart.resize();
      });
  });
});
</script>
<style scoped="study-life-Container" lang="scss">
.chart-container {
  width: 100%;
  height: 100%;
}

.studyContainer {
  gap: 10px;
  height: 100%;

  .title {
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
    border-left: 4px solid #00a7ff;
    padding-left: 10px;
    border-radius: 2px;
    margin-bottom: 5px;
  }

  .box1 {
    margin: 0px auto;
    box-sizing: border-box;
    width: 99%;
    height: 40%;
    .chengJJL-container {
      width: 100%;
      display: flex;
      gap: 2px;
      height: calc(100% - 25px);

      .chengJJL-item {
        height: 100%;
        width: 100%;
      }
    }
  }

  .box2 {
    margin: 0px auto;
    box-sizing: border-box;
    height: calc(30% - 10px);
    width: 99%;
    .xuekjhd-container {
      display: flex;
      gap: 2px;
      height: calc(100% - 25px);
      .xuekjhd-itembox-left {
        flex: 1;
        height: 100%;
      }

      .xuekjhd-itembox-right {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
  }
}
.info {
  width: calc(100% - 20px);
  margin: 10px;
  border: 1px solid #00ffff;
  background: rgba(12, 238, 255, 0.15);
  padding: 14px 12px;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 12px;
}
.info-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  background: #00ffff;
}

::v-deep .el-timeline-item__node--normal {
  width: 10px;
  height: 10px;
}
::v-deep .el-timeline-item__content {
  font-size: 14px !important;
}
::v-deep .el-timeline-item__timestamp {
  font-size: 12px !important;
}
::v-deep .el-timeline-item__wrapper {
  padding-left: 20px;
}
.al-item {
  border: 1px solid #32fff3;
  line-height: 20px;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}
.result-item {
  width: 200px;
  border: 1px solid #0ceeff;
  background: rgba(12, 238, 255, 0.1);
  padding: 30px 16px 20px 16px;
  border-radius: 4px;
  text-align: center;
  position: relative;
  margin-right: 25px;
}
.result-text {
  margin-top: 6px;
  line-height: 20px;
  font-size: 11px;
  white-space: wrap;
  text-align: left;
}
.result-type {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 6px;
  background-color: rgba(0, 255, 178, 0.55);
  color: #fff;
  font-size: 10px;
  border-radius: 2px;
}
.result-date {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 10px;
}
</style>